<template>
    <div class="expertwrap">
        <avue-crud
            :option="detailOptions.options"
            :table-loading="loading"
            :data="data"
            :page.sync="page"
            ref="crud"
            v-model="form"
            :permission="permissionList"
            @row-save="rowSave"
            @row-update="rowUpdate"
            :before-open="beforeOpen"
            @search-change="searchChange"
            @search-reset="searchReset"
            @selection-change="selectionChange"
            @current-change="currentChange"
            @size-change="sizeChange"
            @refresh-change="refreshChange"
            :upload-after="uploadAfter"
            @on-load="onLoad"
        >
            <template slot-scope="{ row }" slot="category">
                <el-tag>{{ row.categoryName }}</el-tag>
            </template>
            <template slot-scope="{ row }" slot="reportName">
                <el-tag @click="reportView(row)">查看报告</el-tag>
            </template>
            <template slot-scope="{ row }" slot="payProof">
                <el-tag @click="payProofView(row)">查看凭证</el-tag>
            </template>
            <template slot-scope="{ row }" slot="menu">
                <el-button @click="rowDel(row)" v-show="row.submitStatus==0" type="text" size="small" icon="el-icon-remove">删除</el-button>
                <el-button @click="rowEditForm(row)" v-show="row.submitStatus==0 || row.submitStatus==1" type="text" size="small" icon="el-icon-edit">编辑</el-button>
                <el-button @click="flowLogView(row)" type="text" size="small" icon="el-icon-view">审批查看</el-button>
                <el-button @click="print(row)" v-show="row.submitStatus==2" type="text" size="small" icon="el-icon-mouse">打印封面</el-button>
                <el-drawer
                    :visible.sync="showAddMenuDrawer"
                    :direction="'ltr'"
                    :size="'75%'"
                    :center="false"
                    :modal="false"
                    :destroy-on-close="true"
                    >
                </el-drawer>
            </template>
        </avue-crud>
        <el-drawer
                :visible.sync="showAddMenuDrawer"
                :direction="'ltr'"
                :title="caseTit"
                :size="'75%'"
                :center="false"
                :modal="false"
                :destroy-on-close="true">
            <approve-detail :formsList="forms" :detaiList='detailOptions' :submitUrl="submitUrl"
                            ref="sonList"
                            :returnUrl="returnUrl" :flowStatus="flowStatus" @closeFlow="closeFlowProcess"></approve-detail>
        </el-drawer>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import {getToken} from '@/util/auth';
import { printAction } from "../../util/print";
import approveDetail from "../flow/publicApprove/approveDetail";
import {
    dnzlView,
    dnzlPrint,
    dnzlPayProofView
} from "@/api/sxdky/sxdky"; //子页面所需接口
export default {
    components: {
        approveDetail,
    },
    name: "commonTemplate",
    props: {
        detailOptions: {
            type: Object,
            required: true,
        },
        // 流程状态
        flowStatus:{
            type: Object,
            required: true,
        },
        // 提交URL
        submitUrl:{
            type: Object,
            required: true,
        },
        // 提交URL
        returnUrl:{
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            forms:"",
            form: {},
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            selectionList: [],
            data: [],
            infoData: [],
            elUploadSet: {
                action: '/api/expert/importExcel',
                fileList: false,
                limit: 1,
            },
            showAddMenuDrawer: false,
            selList: [],
            excelBox: false,
            payProof:"",
            excelOption: {
                submitBtn: false,
                emptyBtn: false,
                column: [
                    {
                    label: '模板上传',
                    prop: 'excelFile',
                    type: 'upload',
                    // drag: true,
                    loadText: '模板上传中，请稍等',
                    span: 24,
                    propsHttp: {
                        res: 'data'
                    },
                    tip: '请上传 .xls,.xlsx 标准格式文件',
                    action: "/api/dis-report/project/ecp/import-project"
                    },
                    {
                    label: "数据覆盖",
                    prop: "isCovered",
                    type: "switch",
                    align: "center",
                    width: 80,
                    dicData: [
                        {
                        label: "否",
                        value: 0
                        },
                        {
                        label: "是",
                        value: 1
                        }
                    ],
                    value: 0,
                    slot: true,
                    rules: [
                        {
                        required: true,
                        message: "请选择是否覆盖",
                        trigger: "blur"
                        }
                    ]
                    },
                    {
                    label: '模板下载',
                    prop: 'excelTemplate',
                    formslot: true,
                    span: 24,
                    }
                ]
            },
            excelForm: {},
        };
    },
    computed: {
        ...mapGetters(["permission", "themeName"]),
        permissionList() {
        return {
            addBtn: this.vaildData(this.permission.dnzl_add, false),
            viewBtn: this.vaildData(this.permission.dnzl_add, false),
            delBtn: this.vaildData(this.permission.dnzl_add, false),
            editBtn: this.vaildData(this.permission.dnzl_add, false),
        };
        },
        ids() {
        let ids = [];
        this.selectionList.forEach((ele) => {
            ids.push(ele.id);
        });
        return ids.join(",");
        },
    },
    methods: {

        // 关闭父级窗口
        closeFlowProcess () {
            this.showAddMenuDrawer = false
            this.onLoad(this.page);
        },

        // 流程日志
        flowLogView(row){
            this.forms = row
            this.showAddMenuDrawer=true
            this.$nextTick(() => {
                this.$refs.sonList.init();
            })
        },
        rowSave(row, done, loading) {
            row.payProof = this.payProof;
        this.detailOptions.url.add(row).then(
            () => {
            this.onLoad(this.page);
            this.$message({
                type: "success",
                message: "操作成功!",
            });
            done();
            },
            (error) => {
                window.console.log(error);
                loading();
            }
        );
        },
        // 调用编辑表单
        rowEditForm(row){
            this.$refs.crud.rowEdit(row);
        },
        rowUpdate(row, index, done, loading) {
            this.detailOptions.url.update(row).then(
                () => {
                this.onLoad(this.page);
                this.$message({
                    type: "success",
                    message: "操作成功!",
                });
                done();
                },
                (error) => {
                window.console.log(error);
                loading();
                }
            );
        },
        rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
            .then(() => {
            return this.detailOptions.url.remove(row.id);
            })
            .then(() => {
            this.onLoad(this.page);
            this.$message({
                type: "success",
                message: "操作成功!",
            });
            });
        },
        // 打印下载
        print(row) {
            window.open(dnzlPrint+`?id=${row.id}&${this.website.tokenHeader}=${getToken()}`);
        },
        rowInfoDel(row) {
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
            .then(() => {
            return this.detailOptions.infoUrl.removeInfo(row.id);
            })
            .then(() => {
            this.onLoadInfo(this.pages, row);
            this.$message({
                type: "success",
                message: "操作成功!",
            });
            });
        },
        searchReset() {
        this.query = {};
        this.onLoad(this.page);
        },
        searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
        },
        selectionChange(list) {
        this.selectionList = list;
        },
        selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
        },
        listAllDelete() {
        if (this.selectionList.length === 0) {
            this.$message.warning("请选择至少一条数据");
            return;
        }
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
            .then(() => {
            return this.detailOptions.url.remove(this.ids);
            })
            .then(() => {
            this.onLoad(this.page);
            this.$message({
                type: "success",
                message: "操作成功!",
            });
            this.$refs.crud.toggleSelection();
            });
        },
        // 打开之前
        beforeOpen(done) {
           this.payProof = "";
           done();
        },
        currentChange(currentPage) {
        this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
        this.page.pageSize = pageSize;
        },
        refreshChange() {
           this.onLoad(this.page, this.query);
        },
        onLoad(page, params = {}) {
        const { releaseTimeRange } = this.query;
        let values = {
            ...params,
        };
        if (releaseTimeRange) {
            values = {
            ...params,
            releaseTime_datege: releaseTimeRange[0],
            releaseTime_datelt: releaseTimeRange[1],
            ...this.query,
            };
            values.releaseTimeRange = null;
        }
        this.loading = true;
        this.detailOptions.url
            .getList(page.currentPage, page.pageSize, values)
            .then((res) => {
            const data = res.data.data;
            this.page.total = data.total;
            this.data = data.records;
            this.loading = false;
            this.selectionClear();
            });
        },
        handleImport() {
            this.excelBox = true;
        },
        downloadFile() {
            window.open(`/api/sis-is/expert/downloadExcel?${this.website.tokenHeader}=${getToken()}`);
        },
        selInfoChange(list) {
           console.log(list)
        },
        saveMenuData(row) {
        let selArr = [];
        this.selList.forEach(item => {
            selArr.push(item.id)
        })
        let selData = {
            id: row.id,
            ids: selArr.toString()
        }
        this.detailOptions.menuUrl.saveMenu(selData).then(
            () => {
            this.$message({
                type: "success",
                message: "操作成功!",
            });
            this.showAddMenuDrawer = false;
            },
            (error) => {
                window.console.log(error);
            }
        );
        },
        selMenuChange(list) {
           this.selList = list;
        },

        // 上传回调
        uploadAfter(res,done) {
            if(typeof(res) !== 'string'){
                this.form = res;
            }else{
                let preInfo = this.payProof == ""?"":",";
                this.payProof =  this.payProof + preInfo + res;
            }
            this.excelBox = false;
            this.refreshChange();
            done();
        },
        handleTemplate() {
            window.open(`/api/dis-report/project/ecp/export-template?${this.website.tokenHeader}=${getToken()}`);
        },

        toPrint() {
            let printData = [], htmlStr = '';
            this.selectionList.forEach((selItem) => {
                printData.push(printAction(this.detailOptions.options.column, selItem))
            })
            printData.forEach((item, index) => {
                htmlStr += '数据'+ index + ':' + item
            })
            $('#printId').append(htmlStr)
            this.$Print('#printId');
            $('#printId').html('')
        },

        cancelSignItem(rowData) {
            console.log(rowData)
        },
        cancelSign() {
            console.log(this.selectionList)
        },
        // 查看报告
        reportView(row){
            window.open(dnzlView+`?id=${row.id}&${this.website.tokenHeader}=${getToken()}`);
        },
        // 查看凭证
        payProofView(row){
            window.open(dnzlPayProofView+`?id=${row.id}&${this.website.tokenHeader}=${getToken()}`);
        },
    }
};
</script>

<style lang="scss">
.menuOtherBtn-wrap {
  display: inline-block;
}
.menuDrawer-wrap {
      padding: 30px;
}
.expertwrap .menuDrawer-wrap .el-table__fixed .el-table__fixed-body-wrapper {
  left: 0 !important;
}
.expertwrap .menuDrawer-wrap .el-table__fixed .el-table__fixed-header-wrapper {
  left: 0 !important;
}
.dialog-footer {
  margin-top: 10px;
  text-align: right;
}
.chart-wrap{
    width: 100%;
    height: calc(100vh - 425px);
    padding: 20px;
}
.print-wrap {
    /* display:none; */
    /* z-index: -1; */
    page-break-before: always;
}
.print-cont {
    display: flex;

}
.print-label {
    margin-bottom: 10px;
}
</style>
